<div class="palm-page-header">
   <div class="palm-page-header-wrapper">    
   	<div class="icon gift-icon"></div>                   
      <div class="title" id="title">
         Add a Gift</div>     
   </div>
</div> 

<div class="palm-group">
	<div class="palm-group-title">Who is this gift for?</div>
	<div class="palm-list">
	  <div class='palm-row single'>
	    <div class="palm-row-wrapper" x-mojo-focus-highlight="true">
	    	<div style="float:right; margin-left: 10px; margin-right: 10px; margin-top: 4px;" id="addperson" class="addstore"></div>
	        <div id="personName" x-mojo-element="ListSelector" align="left"></div>
	    </div>
	  </div>
	</div>
</div>
<div class="palm-group">
	<div class="palm-group-title">Gift Information</div>
	<div class="palm-list">
		<div class='palm-row first'>
			<div class="palm-row-wrapper textfield-group" x-mojo-focus-highlight="true">
				<div class="title">
				    <div class="label">Name</div>
				    <div id="giftName" x-mojo-element="TextField" align="left"></div>
				</div>
			</div>
		</div>
		<div class='palm-row'>
			<div class="palm-row-wrapper textfield-group" x-mojo-focus-highlight="true">
				<div class="title">
				    <div class="label">Description</div>
				    <div id="giftDescription" x-mojo-element="TextField" align="left"></div>
				</div>
			</div>
		</div>
		<div class='palm-row'>
			<div class="palm-row-wrapper textfield-group" x-mojo-focus-highlight="true">
				<div class="title">
				    <div class="label">Cost</div>
				    <div id="giftCost" x-mojo-element="TextField" align="left"></div>
				</div>
			</div>
		</div>
		<div class='palm-row'>
		    <div class="palm-row-wrapper" x-mojo-focus-highlight="true">
		    	<div style="float:right; margin-left: 10px; margin-right: 10px; margin-top: 4px;" id="addstore" class="addstore"></div>
		        <div id="storeId" x-mojo-element="ListSelector" align="left"></div>
		    </div>
	  	</div>
		<div class='palm-row'>
			<div class="palm-row-wrapper textfield-group" x-mojo-focus-highlight="true">
			  <div class="title">
			    <div class="label">Bought?</div>
			    <div x-mojo-element="ToggleButton" id="bought" class="radiobuttonClass" name="radiobuttonName" align="left" style="float: left"></div>
			  </div>
			</div>
		</div>
		<div class='palm-row'>
			<div class="palm-row-wrapper textfield-group" x-mojo-focus-highlight="true">
			  <div class="title">
			    <div class="label">Must Have?</div>
			    <div x-mojo-element="ToggleButton" id="mustHave" class="radiobuttonClass" name="radiobuttonName" align="left" style="float: left"></div>
			  </div>
			</div>
		</div>
		<div class='palm-row last'>
			<div class="palm-row-wrapper" x-mojo-focus-highlight="true">
				<div class="title">
				<div id="needBy" x-mojo-element="DatePicker" align="left"></div>
				</div>
			</div>
		</div>
		
	</div>
</div>
</div>
<div x-mojo-element="Button" id="okButton"></div>
<div id="logger"></div>
